/**
 * 进度显示组件
 */

import React from 'react';
import { Progress, Alert } from 'antd';
import { CheckCircleOutlined, ExclamationCircleOutlined, LoadingOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { themeConfig } from '../../theme/themeConfig';
import { ProcessProgress } from '../../types';

interface ProgressDisplayProps {
  progress: ProcessProgress;
}

const ProgressContainer = styled.div`
  .progress-header {
    display: flex;
    align-items: center;
    gap: ${themeConfig.spacing.sm};
    margin-bottom: ${themeConfig.spacing.md};
  }
  
  .progress-icon {
    font-size: 24px;
    
    &.success {
      color: ${themeConfig.colors.success};
    }
    
    &.error {
      color: ${themeConfig.colors.error};
    }
    
    &.loading {
      color: ${themeConfig.colors.primary};
    }
  }
  
  .progress-message {
    font-size: ${themeConfig.typography.fontSize.body};
    font-weight: ${themeConfig.typography.fontWeight.medium};
    color: ${themeConfig.colors.text};
  }
  
  .progress-bar {
    margin-bottom: ${themeConfig.spacing.md};
  }
  
  .error-alert {
    margin-top: ${themeConfig.spacing.md};
  }
`;

export const ProgressDisplay: React.FC<ProgressDisplayProps> = ({ progress }) => {
  const getStatusIcon = () => {
    switch (progress.status) {
      case 'completed':
        return <CheckCircleOutlined className="progress-icon success" />;
      case 'error':
        return <ExclamationCircleOutlined className="progress-icon error" />;
      default:
        return <LoadingOutlined className="progress-icon loading" />;
    }
  };

  const getProgressStatus = () => {
    switch (progress.status) {
      case 'completed':
        return 'success';
      case 'error':
        return 'exception';
      default:
        return 'active';
    }
  };

  const getProgressColor = () => {
    switch (progress.status) {
      case 'completed':
        return themeConfig.colors.success;
      case 'error':
        return themeConfig.colors.error;
      default:
        return themeConfig.colors.primary;
    }
  };

  return (
    <ProgressContainer>
      <div className="progress-header">
        {getStatusIcon()}
        <div className="progress-message">
          {progress.message}
        </div>
      </div>
      
      <div className="progress-bar">
        <Progress
          percent={progress.progress}
          status={getProgressStatus() as any}
          strokeColor={getProgressColor()}
          showInfo={true}
          format={(percent) => `${percent}%`}
        />
      </div>
      
      {progress.status === 'error' && progress.error && (
        <Alert
          message="处理失败"
          description={progress.error}
          type="error"
          showIcon
          className="error-alert"
        />
      )}
    </ProgressContainer>
  );
};
